<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D移动translate</title>
  <style>
    body {
      /* 透视写到被观察的盒子的父盒子中 : 视距 */
      perspective: 300px;
    }

    div {
      width: 200px;
      height: 200px;
      margin: 300px auto;
      background-color: pink;

      transition: all 1s;

      /* 1. translateZ 沿着Z轴移动 */
      /* 2. translateZ 后面的单位 我们一般跟px */
      /* 3. translateZ(100px) 向外移动100px 向我们的眼睛来移动的 */
      transform: translateX(100px) translateY(100px) translateZ(100px);

      /* 简写 */
      transform: translate3d(100px, 100px, 100px);

      /* xyz轴不可省略 如果没有就写0 */
      transform: translate3d(0, 0, 100px);

    }

    div:hover {
      transform: translateZ(200px);
    }
  </style>
</head>

<body>

  <div></div>

</body>

</html>